/*
.########..#######...#######..########.########.########.
.##.......##.....##.##.....##....##....##.......##.....##
.##.......##.....##.##.....##....##....##.......##.....##
.######...##.....##.##.....##....##....######...########.
.##.......##.....##.##.....##....##....##.......##...##..
.##.......##.....##.##.....##....##....##.......##....##.
.##........#######...#######.....##....########.##.....##
*/

footer {
    background-color: rgb(0, 0, 0, 0.2);
}

footer .container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/*
..######...#######..##.......##.....##.##.....##.##....##..######.
.##....##.##.....##.##.......##.....##.###...###.###...##.##....##
.##.......##.....##.##.......##.....##.####.####.####..##.##......
.##.......##.....##.##.......##.....##.##.###.##.##.##.##..######.
.##.......##.....##.##.......##.....##.##.....##.##..####.......##
.##....##.##.....##.##.......##.....##.##.....##.##...###.##....##
..######...#######..########..#######..##.....##.##....##..######.
*/

footer .columns {
    display: flex;
    flex-direction: row;
}

footer .column {
    margin: 22px;
    flex: 1;
}

footer .column label {
    padding-bottom: 16px;
    font-size: 16px;
    display: block;
}

footer .column a {
    opacity: 0.5;
    display: block;
    padding-bottom: 8px;
    text-decoration: none;
    outline: none;
    transition: 0.25s;
}

footer .column a:hover, footer .column a:focus {
    opacity: 1;
}

footer .column a:active {
    text-decoration: underline;
}

/*
.########...#######..########.########..#######..##.....##
.##.....##.##.....##....##.......##....##.....##.###...###
.##.....##.##.....##....##.......##....##.....##.####.####
.########..##.....##....##.......##....##.....##.##.###.##
.##.....##.##.....##....##.......##....##.....##.##.....##
.##.....##.##.....##....##.......##....##.....##.##.....##
.########...#######.....##.......##.....#######..##.....##
*/

footer .bottom {
    padding: 22px;
}

footer .bottom label {
    opacity: 0.5;
}

footer .bottom .left {
    float: left;
}

footer .bottom .right {
    float: right;
}

/*
.##.....##.########.########..####....###...
.###...###.##.......##.....##..##....##.##..
.####.####.##.......##.....##..##...##...##.
.##.###.##.######...##.....##..##..##.....##
.##.....##.##.......##.....##..##..#########
.##.....##.##.......##.....##..##..##.....##
.##.....##.########.########..####.##.....##
*/

@media only screen and (max-width: 600px) {
    footer .columns {
        flex-direction: column;
        text-align: center;
    }

    footer .column a {
        display: inline-block;
        padding-left: 4px;
        padding-right: 4px;
    }
}

@media only screen and (max-width: 420px) {
    footer .bottom {
        text-align: center;
    }

    footer .bottom .left, footer .bottom .right {
        float: none;
        display: block;
    }
}

/*
.########.##.....##.########....########.##....##.########.
....##....##.....##.##..........##.......###...##.##.....##
....##....##.....##.##..........##.......####..##.##.....##
....##....#########.######......######...##.##.##.##.....##
....##....##.....##.##..........##.......##..####.##.....##
....##....##.....##.##..........##.......##...###.##.....##
....##....##.....##.########....########.##....##.########.
*/